//cSpell: words shixun ceyan Pushable signup codepen

import React,{ Component } from 'react'
import HomeHeader from '../../components/Header'
import TabArea from './TabArea'
import SideMenu from '../../components/SideMenu'
import './style.css'

class Home extends Component {

    constructor(args) {
        super(args);
        this.state = {
            showBar: true,
            activeItem: '视频1',
            menus: [{'title':'视频1','type':'video'},
                {'title':'视频2','type':'video'},
                {'title':'视频3','type':'video'},
                {'title':'实训1','type':'shixun'},
                {'title':'实训2','type':'shixun'},
                {'title':'实训3','type':'shixun'},
                {'title':'测验1','type':'ceyan'},
                {'title':'测验2','type':'ceyan'}]
        }
    }

    toggleBarShows = () => {
        this.setState({showBar: !this.state.showBar})
    }

    menuItemClick = (e, { name }) => {
        this.setState({ activeItem: name })
    }

    backItemClick = () => {
        console.log("back to lesson intro")
    }

    render() {
        const visible = this.state.showBar
        const activeItem = this.state.activeItem
        return (
            <SideMenu visible={visible} activeItem={activeItem} backItemClick={this.backItemClick} menuItemClick={this.menuItemClick} menus={this.state.menus}>
                <HomeHeader title='课程名称' toggleBarShows={this.toggleBarShows}/>
                <TabArea contents={activeItem} classes={visible?'tab-content tab-scale':'tab-content'}/>
            </SideMenu>
        )
    }
}

export default Home
